<template>
    <div style="width: 100%;height: 100vh;background-color: steelblue; overflow: hidden;">
        <div style="width: 400px; margin: 150px auto;">
            <div style="color: white; font-size: 30px; text-align: center; padding: 30px 0;">欢迎注册</div>
            <el-form ref="ruleFormRef" style="max-width: 400px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input prefix-icon="Avatar"  placeholder="请输入用户名" v-model="ruleForm.username" type="text" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="Lock" placeholder="请输入密码" v-model="ruleForm.password" type="password" autocomplete="off"
                        show-password />
                </el-form-item>

                <el-form-item prop="checkpass">
                    <el-input prefix-icon="Lock" placeholder="请确认密码" v-model="ruleForm.checkPass" type="password" autocomplete="off"
                        show-password />
                </el-form-item>

                <el-form-item>
                    <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup name="Register">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import request from '../utils/request';
import router from '../router';


const ruleFormRef = ref<FormInstance>()

const validateusername = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}

const validatePassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}

const validatecheckPass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== ruleForm.checkPass) {
        callback(new Error("Two inputs don't match!"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: '',
    checkPass: '',
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validateusername, trigger: 'blur' }],
    password: [{ validator: validatePassword, trigger: 'blur' }],
    checkPass: [{ validator: validatecheckPass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (ruleForm.password != ruleForm.checkPass) {
        ElMessage({
            message: '两次输入的密码不一致！',
            type: 'error'
        })
    } else {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {
                request.post('/user/register', ruleForm).then(res => {
                    if (res.code === '0') {
                        ElMessage({
                            message: '注册成功',
                            type: 'success'
                        })
                        router.push('/login') //登录成功之后进行页面跳转                                  
                    }
                })
                console.log('submit!')
            } else {
                console.log('error submit!')
                return false
            }
        })
    }

}

</script>